Homework 11 - mobile app interactivity

Author

Bryan Lizama Montecino

Published

April 13, 2024

Overview of Event RSVP Helper

The Event RSVP Helper app is designed to digitize and simplify the RSVP process for various events, targeting a broad audience of adults. It aims to facilitate event planning without the hassle of traditional mail, offering an easy-to-use web interface for guests to respond. Key features include customizable digital invitations, a user-friendly design, and seamless guest management. The app will generate revenue through a token system or advertisements.

Key features

  • Streamlines planning for weddings, birthdays, and other events.
  • Eliminates manual RSVP tracking and invitation management.
  • Enhances user experience for organizers and guests.
  • Provides themed templates for various events:
    • Weddings: white flowers, black and white themes.
    • Baby showers: balloons, baby bottles, pink and blue colors.
    • Graduations: caps and festive decorations.
    • Birthdays: cake and candle designs.
    • Other: versatile designs for different events.
  • Automatically inserts event details into invitations.
  • Uses contacts for easy invitation distribution.
  • Allows setting of RSVP deadlines and provides response summaries.

Individual Screen details

The following section documents the individual screens of the application, the elements on each screen, and how the user is expected to interact with the screen.

Main screen

The main screen serves as the central node for this application. All other screens begin from this screen.

Wireframe design

Below is my wireframe image.

As-built screenshot

Here are screen shots of what I created running on my phone.

Contacts Screen

The contacts screen serves as the starting point for other screens that all work to allow the user to freely select who their guests will be, along with customizing the message invites.

Wireframe design

Below is my wireframe image.

As-built screenshot

Here are screen shots of what I created running on my phone.

Settings Screen

The settings screen gives the user the ability to set the app according to their preferences, dealing with app appearance and access to contacts.

Wireframe design

Below is my wireframe image.

As-built screenshot

Here is a screen shot of what I created running on my phone.

Snack code for screens

Reflection

  • Discuss your experience coding hooks in this assignment. Which hooks were hardest? Which easiest? What helped you figure them out? Working through Homework 11 was difficult. I used several React hooks such as useState, useEffect, and some instances of useContext. The easiest hook to implement in the mobile app was useState as it was pretty straight-forward, with the purpose of managing the state within a component. On the flip side, working with useEffect brought challenges to the homework, as it was hard to keep track of the side effects. It was trial and error when working with it to avoid making infinite loops API calls.

  • How much time did you spend on this specific assignment (homework 11 - interactivity)? For HW11, I spent approximately 2 hours per day this entire past week. Most of the time was dedicated to understanding hooks, managing states and ensuring all interactive elements kept their intended purpose.

  • What was the easiest part of this specific assignment (hw11)? For the easiest part of HW11, I believe was implementing TextInput components for the Event Details Screen, along with managing the state with the useState hook.

  • What is the hardest part of this specific assignment (hw11)? The hardest part of this assignment was working with API fetch calls. It was difficult to correctly use the useEffect hook to fetch data from an API.

  • Discuss your overall experience using Snack and developing this mobile app. Using Snack is great. Having the ability to receive instant feedback and the ability to see changes immediately on my physical iPhone through the Expo app was beneficial.